<template>
  <div class="common-layout">
    <el-container >
      <el-header></el-header>
      <el-container>
        <el-aside width="200px">
      <el-menu router
          :default-active="$route.path" route:default-active="true"  class="el-menu-vertical-demo" :collapse="false" >
        <el-menu-item v-for="item in noChildren()" :key="item.name" :index="item.name" >
            <component :is="item.icon" style="width: 18px;height: 18px;"></component>
            <template #title>{{item.label}}</template>
        </el-menu-item>
        <el-sub-menu v-for="item in hasChildren()" :key="item.name" :index="item.label">
            <template #title>
                <el-icon>
                    <component :is="item.icon" style="width: 18px;height: 18px;"></component>
                </el-icon>
                <span>{{item.label}}</span>
            </template>
            <el-menu-item-group v-for="subItem in item.children" :key="subItem.name">
            <el-menu-item :index="subItem.name">{{subItem.label}}</el-menu-item>
           </el-menu-item-group>
        </el-sub-menu>
    </el-menu>
        </el-aside>
        <el-main> <router-view></router-view></el-main>
      </el-container>


    </el-container>
  </div>
</template>

<script>

export default {
  // 组件名称
  name: 'IndexView',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      menuData:[
      {
        name: "/usermanage",
        label: "用户管理",
        icon: 'Menu',
    },
    {
        name: "/videomanage",
        label: "视频管理",
        icon: 'Menu',
    },
    {
        name: "/exammanage",
        label: "考试管理",
        icon: 'Menu',
    },
    {
        name: "/honormanage",
        label: "荣誉管理",
        icon: 'Menu',
    },
    {
        label: "培训管理",
        icon: 'Menu',
        url: "/videomanage",
        children: [
            {
                name: "/questionmanage",
                label: "试题管理",
                icon: "Setting",
            },
            {
                name: "/casemanage",
                label: "案例管理",
                icon: "Setting",
            },
        ]
    },
    {
        name: "/suggestmanage",
        label: "合理化建议审核",
        icon: 'Menu',
    },
      ]
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    noChildren (){
      return this.menuData.filter((item) => !item.children)
     },
     hasChildren(){
      return this.menuData.filter((item) => item.children)
     }
  }
}
</script>

<style scoped>

</style>
